<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>


    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>

    <div data-role="page" id="maximum">

        <div data-role="header" style="background-color: #fff;">
            <h1>淘票票</h1>
        </div>

        <div data-role="main" class="ui-content">
            <!-- <p>我现在是一个移动端开发者!!</p> -->

            <!-- <div class="big">
                <div class="left">
                    <img id="picture"
                        src="https://img.alicdn.com/bao/uploaded/i1/O1CN01Yoc4Xw1ZagXifEFHo_!!6000000003211-0-alipicbeacon.jpg_300x300.jpg"
                        alt="">
                    <h3>新神榜:杨戳</h3>
                    <p>暂无评分</p>
                    <p>导演:赵霁</p>
                    <p>主演:王凯,李兰陵,季冠霖,李立宏</p>
                    <p class="red">今日最热</p>
                </div>
                <div class="right">
                    <button type="button" id="purchase" class="layui-btn layui-btn-radius layui-btn-normal">购买</button>
                    <p>特惠</p>
                </div> -->
        </div>
    </div>

    <div data-role="footer" style="background-color: #fff;">

        <h1>底部文本</h1>
    </div>

    </div>

</body>
<script>
    $(function () {
        //渲染列表
        show()
        //点击
        // $('#purchase').click(jump)
    })

    function show() {
        $.ajax({
            type: 'get',
            url: `https://liu.zzgoodqc.cn/movie/list?page=${1}`,
            // dataType: 'json',
            success: function (res) {
                console.log(res.coming);
                let str = ''
                for (let i in res.coming) {
                    str += `
                            <div class="big">
                                <div class="left">
                                    <img id="picture" src="${res.coming[i].img}" alt="">
                                    <h3>${res.coming[i].nm}</h3>
                                    <p>暂无评分<span>${res.coming[i].sc}<span></p>
                                    <p>导演:赵霁</p>
                                    <p>主演:${res.coming[i].star}</p>
                                    <p class="red">今日最热</p>
                                </div>
                                <div class="right">
                                    <button type="button" id="purchase" onclick=jump() class="layui-btn layui-btn-radius layui-btn-normal">购买</button>
                                    <p>特惠</p>
                                </div>
                            </div>
                           `
                }
                $('.ui-content').html(str)

                jump = function () {
                    window.location.href = './vote.html'
                }
            }
        })

    }

</script>
<style>
    body {
        width: 100%;
        height: 100%;
    }

    #maximum {
        background-color: rgb(241 241 241);
        height: 18.75rem;
        width: 380.8px;
        font-size: 1.25rem;
        overflow: auto;
        background: #EEEEEE;
    }

    .ui-content {
        width: 23.75rem;
        padding: 0;
    }

    .big {
        width: 23.75rem;
        height: 10rem;
        background-color: #fff;
        border-radius: .625rem;
        margin-top: .625rem;
        margin-left: .0625rem;
    }

    .left {
        width: 18.75rem;
        float: left;
        line-height: 1.25rem;
        padding-top: .3125rem;
    }

    #picture {
        width: 6.25rem;
        height: 8.8rem;
        float: left;
        border-radius: 1.1rem;
        padding-top: 5px;
    }

    .left h3 {
        height: 1.5625rem;
        font-size: 1.125rem;
        margin-left: 112px;
        padding-top: .5rem;
    }

    .left p {
        height: 1.25rem;
        font-size: .625rem;
        padding-top: .1875rem;
        margin-left: 112px;
    }

    .left p span {
        color: coral;
    }

    .red {
        width: 3.125rem;
        height: 1.25rem;
        border: .0625rem solid red;
        color: red;
        border-radius: .375rem;
        margin-top: .3125rem;
    }

    .right {
        width: 4rem;
        height: 9.375rem;
        float: right;
        margin-right: 10px;
    }

    .right p {
        margin-left: 22.4px;
        color: #ccc;
        font-size: 16px;
    }

    #purchase {
        margin-top: 3.75rem;
        background-color: #FF359A;
        color: #fff;
        line-height: .1875rem;
    }
</style>

</html>